<template>
  <div :class="$style.wrapper" ref="wrapper">
    <ul :class="$style.container">
      <router-link tag="li" v-for="item of tagList" :to="item.url" :key="item.url" :class="$route.path === item.url ? $style.active: ''" v-if="item.name">
        {{item.name}} <i class="el-icon-circle-close-outline" @click.stop="handleRemoveClick(item)"></i>
      </router-link>
    </ul>
  </div>
</template>
<script>
import BScroll from "better-scroll";
export default {
  data() {
    return {};
  },
  computed: {
    tagList() {
      return this.$store.getters.tagList;
    }
  },
  mounted() {
    let scroll = new BScroll(this.$refs.wrapper, {
      scrollX: true,
      scrollY: false,
      click:true,
      bounce: {
        left: false,
        right: false
      }
    });
  },
  methods: {
    // 删除标签
    handleRemoveClick(item) {
      this.$store.commit("REMOVE_TAGLIST", item);
    }
  }
};
</script> 
<style lang="scss" module>
.wrapper {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  .container {
    display: inline-block;
    min-width: 100%;
    height: 40px;
    line-height: 40px;
    border-bottom: 1px solid #ccc;
    li {
      margin: 3px;
      height: 30px;
      line-height: 30px;
      padding: 0 5px;
      display: inline-block;
      background: #fff;
      border: 1px solid #d8dce5;
      color: #495060;
      font-size: 14px;
      border-radius: 3px;
    }
    .active {
      &:before {
        background: #fff;
        border-radius: 50%;
        content: "";
        display: inline-block;
        height: 8px;
        margin-right: 2px;
        position: relative;
        width: 8px;
      }
      display: inline-block;
      border: 1px solid #eee;
      background: #42b983;
      border: 1px solid #42b983;
      color: #fff;
    }
  }
}
</style>